<template>
    <l-panel style="padding:0;" >
        <template #toolLeft >
            <l-query2 :labelWidth="0" :popoverWidth="240" :items="queryItems" :formData="queryData" :loading="tableLoading" @search="handleSearch">
                <template #keyWord >
                    <el-input v-model="queryData.keyWord" :placeholder="$t('请输入查询关键字')"></el-input>
                </template>
                <template #seachDate >
                    <l-date format="yyyy-MM-dd"
                        dateType="daterange"
                        v-model="queryData.seachDate" 
                        :startPlaceholder="$t('开始时间')"
                        :endPlaceholder="$t('结束时间')"
                       >
                    </l-date>
                </template>
            </l-query2>
        </template>
        <template #toolRight >
            <l-tool-btns :hasAdd="false">
            </l-tool-btns>
        </template>
        <l-table ref="mainTable" 
            :loading="tableLoading" 
            :columns="columns" 
            :dataSource="tableData"
            :isPage="true"
            :pageTotal="tableTotal"
            :tablePage.sync="tableCurrentPage"
            @loadPageData="turnTablePage"
            >
            <template v-slot:f_Title="scope" >
                <el-button @click="handleLook(scope.row)" size="mini" type="text">{{scope.row.f_Title}}</el-button>
            </template>
            <template v-slot:f_IsFinished="scope" >
                <el-tag v-if="scope.row.f_EnabledMark == 3" size="mini" type="danger">{{$t('作废')}}</el-tag>
                <el-tag v-else-if="scope.row.f_IsFinished == 1" size="mini" type="warning">{{$t('结束')}}</el-tag>
                <el-tag v-else-if="scope.row.f_IsAgain == 1" size="mini" type="primary">{{$t('重新提交')}}</el-tag>
                <el-tag v-else size="mini" type="success">{{$t('审批中')}}</el-tag>
            </template>
            <template v-slot:f_CreateDate="scope" >
                {{lr_dateFormat(scope.row.f_CreateDate)}}
            </template>
            <l-table-btns :isAuth="false" :isFixed="false" :filterBtns="filterBtns" :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
        </l-table>


        <wf-look-form
            ref="form"
            type="lookmy" 
            :params="{processId:processId}" 
            :isLoadFormData="true" 
            :title="title" 
            :visible.sync="visible"
            >
        </wf-look-form>
    </l-panel>        
</template>

<script>
    const api = window.$api.workflow.process
    export default {
        data() {
            return {
                queryItems:[
                    {prop:'seachDate',span:24},
                    {prop:'keyWord',span:24}
                ],
                queryData:{
                    keyWord:'',
                    seachDate:''
                },
                // 表格参数
                tableLoading: false,
                tableData:[],
                tableTotal:0,
                tableCurrentPage:1,
                tablePageSize:50,
                columns: [
                
                    {label:'编号',prop:'f_LongId',width:160,align:'left'},
                    {label:'标题',prop:'f_Title',minWidth:100,align:'left'},
                    {label:'流程模版',prop:'f_SchemeName',minWidth:100,align:'left'},
                    {label:'状态',prop:'f_IsFinished',width:120,align:'center'},
                    {label:'提交人',prop:'f_UserId',width:250,align:'left',dataType:'fullUser',isNotAutoWrap:true},
                    {label:'提交时间',prop:'f_CreateDate',width:160,align:'left'}
                ],
                tableBtns:[
                    {prop:'Urge',label:'催办',width:100},
                    {prop:'Revoke',label:'撤销',width:100}
                ],

                visible:false,
                title:'',
                processId:''
            }
        },
        computed: {
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.loadTableData()
            },
            handleSearch(){
                this.loadTableData()
            },
            turnTablePage({rows}){
                this.tablePageSize = rows
                this.loadTableData(true)
            },
            async loadTableData(isNotFirst){
                if(!isNotFirst){
                    this.tableCurrentPage = 1
                }
                this.tableLoading = true
                const queryData = this.$deepClone(this.queryData)
                

                if(queryData.seachDate){
                    const dateList = queryData.seachDate.split(' - ')
                    queryData.startDate = dateList[0]
                    queryData.endDate = dateList[1]
                    queryData.seachDate = null
                }


                /*queryData.rows = this.tablePageSize
                queryData.page = this.tableCurrentPage
                queryData.sidx = 'F_CreateDate DESC'*/

                const pagination = {
                    rows: this.tablePageSize,
                    page: this.tableCurrentPage,
                    sidx: "F_CreateDate DESC"
                };

                let data = await this.$awaitWraper(api.getMyPage(pagination,queryData))
                if(data != null){
                    this.tableData = data.rows
                    this.tableTotal = data.records
                }
                else{
                    this.tableData = []
                }
                this.tableLoading = false
            },
            filterBtns(row,btns){
                if(row.f_IsFinished == 1 || row.f_IsAgain == 1 || row.f_EnabledMark == 3){
                    return []
                }
                else if(row.f_IsStart != 0 && row.f_IsCancel != 1 ){
                    return [{prop:'Urge',label:'催办'}]
                }
                else{
                    return btns
                }
            },

            handleLook(row){
                this.title = row.f_Title
                this.processId = row.f_Id
                this.visible = true
            },

            handleRevoke($index,row){
                this.$confirm(this.$t('是否撤销流程?'), this.$t('提示'), {
                    confirmButtonText: this.$t('确定'),
                    cancelButtonText: this.$t('取消'),
                    type: 'warning'
                }).then(() => {
                    if(row.f_IsStart == 0){
                        api.revoke(row.f_Id).then(()=>{
                            this.tableData.splice($index,1)
                            this.tableTotal--
                            this.$message({
                                type: 'success',
                                message: this.$t('撤销成功!')
                            })
                        })
                    }
                    else if(row.f_IsCancel == 1){
                        row.f_IsCancel = 0
                        api.revokeAudit(row.f_Id).then(()=>{
                            this.$message({
                                type: 'success',
                                message: this.$t('撤销成功!')
                            })
                        })
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: this.$t('已取消撤销')
                    })         
                })
            },

            handleUrge($index,row){
                api.urge(row.f_Id).then(()=>{
                    this.$message({
                        type: 'success',
                        message: this.$t('催办成功!')
                    })
                })
            },
        }
    }
</script>